<template>
  <div>
    <h1>Welcome to Fitness</h1>
    <div class="container">

      <!-- <div class="login w3layouts agileits"> -->
        <h2>登 录11</h2>

        <form ref="login" :rules="rules" >
          <div prop="username">
            <input type="text" v-model="form.username" placeholder="请输入用户名">
          </div>
          <div prop="password">
            <input type="password" v-model="form.password" placeholder="请输入密码" required="">
          </div>
        </form>

        <div class="send-button w3layouts agileits">
          <form>
            <input type="submit" @click="loginHandler(form)" value="登 录">
          </form>
        </div>
        <div class="clear"></div>
      <!-- </div> -->

    </div>

  </div>

</template>

<script>
  import { mapActions } from 'vuex'
  
  export default {
    name: 'Login',
    props: {
      usernameRules: {
        type: Array,
        default: () => {
          return [{
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
          }]
        }
      },
      passwordRules: {
        type: Array,
        default: () => {
          return [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    data() {
      return {
        status_code: '',
        form: {
          username: '',
          password: ''
        }
      }
    },
    computed: {
      rules() {
        return {
          username: this.usernameRules,
          password: this.passwordRules
        }
      }
    },
    methods: {
      // 导入vuex中的action  =》handlerlogin
      ...mapActions([
        'handleLogin'
      ]),
      loginHandler() 
      {
        const username = this.username
        const password = this.password
        this.handleLogin({username,password}).then(
          res => {
            console.log("成功！login")
            const data = res.data
            console.log(data)
            //  data => {message: xxxx , status_code: xxxx, data: {token: xxx }}}
            this.status_code = res.data.status_code
            console.log(data.data.token)
            this.$router.push({name:'index'})
          },
          reason => {
            console.log(reason)
            console.log("失败！login")
          }
        ).catch(
        reason => {
          console.log(reason)
          console.log("失败！login")
        })
      }
    }
  }
</script>

<style scoped="scoped">
  @import url("../../assets/css/style-login.css");
</style>
